<template>
  <div class="app-container" style="height: 100%;overflow: hidden;">
    <el-row :gutter="20" style="height: 100%;">
      <!--部门数据-->
      <el-col :span="4" :xs="24" style="height:100%;">
        <div class="head-container">
          <el-input v-model="deptName" placeholder="请输入产品" clearable size="small" prefix-icon="el-icon-search"
            style="margin-bottom: 20px" />
        </div>
        <div class="head-container" style="height:90%; overflow: auto;">
          <el-tree ref="tree" :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
            :filter-node-method="filterNode" node-key="id" :default-expanded-keys="['1']" :default-expand-all="false"
            highlight-current @node-click="handleNodeClick">
            <span class="custom-tree-node" slot-scope="{ node,data }">
              <span>
                ( {{ data.code }})
              </span>
              <span>
                {{ node.label }}
              </span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24" style="height:100%; overflow: auto;">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
          label-width="68px">
          <el-form-item label="存货编码" prop="code">
            <el-input v-model="queryParams.code" placeholder="请输入存货编码" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="产品名称" prop="name">
            <el-input v-model="queryParams.name" placeholder="请输入产品名称" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="产品型号" prop="model">
            <el-input v-model="queryParams.model" placeholder="请输入产品型号" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
              v-hasPermi="['develop:GoodsOrderIn:add']">新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="el-icon-upload2" size="mini" @click="showUploadDialog"
              v-hasPermi="['develop:OrderIronDetail:export']">导入
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="el-icon-download" size="mini"
                       @click="handleExport">导出产品
            </el-button>
          </el-col>
          <!--<el-col :span="1.5">
            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                       @click="handleDelete" v-hasPermi="['system:user:remove']">删除
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="el-icon-download" size="mini"
                       @click="handleExport" v-hasPermi="['system:user:export']">导出
            </el-button>
          </el-col>-->
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table border v-loading="loading" :data="dataList" border stripe>
           <el-table-column type="selection" width="50" align="center"/>
          <el-table-column label="存货编码" align="center" key="code" prop="code"  />
          <el-table-column label="产品名称" align="center" key="name" prop="name" :show-overflow-tooltip="true"  />
          <el-table-column label="产品型号" align="center" key="model" prop="model" :show-overflow-tooltip="true"
             />
          <el-table-column label="计量单位" align="center" key="unit" prop="unit" :show-overflow-tooltip="true"  />
          <el-table-column label="采购单价" align="center" key="costPrice" prop="costPrice" width="120"  />
          <el-table-column label="存货数量" align="center" key="count" prop="count" width="120"  />
          <el-table-column label="存货总价" align="center" key="cost" prop="cost" width="120"  />
          <el-table-column label="重量" align="center" key="dun" prop="dun" />
          <el-table-column label="可用数量" align="center" key="remainderCount" prop="remainderCount" width="120"
             />

          <el-table-column label="创建时间" align="center" prop="createTime" width="160":show-overflow-tooltip="true" >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" v-hasPermi="['develop:GoodsOrderIn:edit']"
                @click="handleUpdate(scope.row)">修改</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" v-hasPermi="['develop:GoodsOrderIn:remove']"
                @click="handleDelete(scope.row)">删除</el-button>
              <el-button size="mini" type="text" icon="el-icon-receiving" v-hasPermi="['develop:GoodsOrderIn:ruku']"
                @click="handleInventoryRu(scope.row)">入库</el-button>
              <el-button size="mini" type="text" icon="el-icon-receiving" v-hasPermi="['develop:GoodsOrderIn:chuku']"
                @click="handleInventoryChu(scope.row)">出库</el-button>
              <el-button size="mini" type="text" icon="el-icon-view" v-hasPermi="['develop:GoodsOrderIn:mingxi']"
                @click="handleShow(scope.row)">关联订单</el-button>
              <el-button size="mini" type="text" icon="el-icon-view" v-hasPermi="['develop:GoodsOrderIn:churukuList']"
                @click="churukuShow(scope.row)">出入库记录</el-button>
              <el-button size="mini" type="text" icon="el-icon-document" @click="useMingxi(scope.row)">使用明细</el-button>
              <el-button size="mini" type="text" icon="el-icon-view" v-hasPermi="['develop:LnGongyi:add']"
                @click="addGongyi(scope.row)">关联工艺</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </el-col>
    </el-row>

    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" :close-on-click-modal="false" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品分类" prop="deptId">
              <treeselect v-model="form.deptId" :options="deptOptions" placeholder="请选择产品分类" @select="selectArea"
                style="width:240px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="存货编码" prop="code">
              <el-input v-model="form.code" placeholder="请输入存货编码" maxlength="30" disabled />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入产品名称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品型号" prop="model">
              <el-input v-model="form.model" placeholder="请输入产品型号" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="计量单位" prop="unit">
              <el-input v-model="form.unit" placeholder="请输入计量单位" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品类别" prop="type">
              <el-radio-group v-model="form.type">
                <el-radio v-for="dict in dict.type.goods_type" :key="dict.value" :label="dict.value">{{ dict.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="材料材质" prop="materialMain">
              <el-select v-model="form.materialMain" placeholder="请选择材材料材质" clearable>
                <el-option v-for="dict in materialMainList" :key="dict.id" :label="dict.name" :value="dict.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="重量" prop="dun">
              <el-input-number v-model="form.dun"  :min="0" :precision="4" placeholder="请输入重量" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <GoodsSaleListForm-info @ok="getList" ref="GoodsSaleListFormList"></GoodsSaleListForm-info>
    <ChurukuListForm-info @ok="getList" ref="churukuFormList"></ChurukuListForm-info>
    <addGongyiForm-list @ok="getList" ref="addGongyiFormList"></addGongyiForm-list>
    <lv-rukumingxi-form @ok="getList" ref="rukuForm"></lv-rukumingxi-form>
    <lv-chukumingxi-form @ok="getList" ref="chukuForm"></lv-chukumingxi-form>
    <useMingxi-chuku-form-list @ok="getList" ref="useMingxiChukuFormList"></useMingxi-chuku-form-list>

    <upload-dialog ref="uploadDialog" @ok="getList" @handleFileSuccess="handleFileSuccess"></upload-dialog>
  </div>
</template>

<script>
  //import {listArea} from "@/api/sysArea/area";
  import {
    listGoodsOrderIn,
    addGoodsOrderIn,
    updateGoodsOrderIn,
    delGoodsOrderIn,
    updateArea,
    addArea,
    goodsOrderInAdd,
    goodsOrderInUpdate
  } from "@/api/sysArea/area";
  import {
    getToken
  } from "@/utils/auth";
  import {
    listByLazyTree
  } from "@/api/sysArea/area";
  import GoodsSaleListFormInfo from '@/views/develop/goodsSale/module/GoodsSaleListFormInfo'
  import ChurukuListFormInfo from '@/views/develop/goodsSale/module/ChurukuListFormInfo'
  import AddGongyiFormList from '@/views/develop/inventoryList/AddGongyiFormList'
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import UploadDialog from "@/views/upload/UploadDialog.vue";
  import {
    getAction,downloadFile
  } from '@/api/manage';
  import LvRukumingxiForm from "@/views/develop/lvRukumingxi/module/LvRukumingxiForm.vue";
  import LvChukumingxiForm from "@/views/develop/lvRukumingxi/module/LvChukumingxiForm.vue";
  import UseMingxiChukuFormList from '@/views/develop/goodsSale/module/UseMingxiChukuFormList'


  export default {
    name: "CailiaoList",
    dicts: ["goods_type"],
    components: {
      LvRukumingxiForm,
      LvChukumingxiForm,
      UploadDialog,
      Treeselect,
      GoodsSaleListFormInfo,
      ChurukuListFormInfo,
      AddGongyiFormList,
      UseMingxiChukuFormList
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 用户表格数据
        dataList: null,
        // 弹出层标题
        title: "",
        // 部门树选项
        deptOptions: [],
        // 是否显示弹出层
        open: false,
        // 部门名称
        deptName: null,
        // 日期范围
        dateRange: [],
        deptId: null,
        code: null,
        form: {
          deptId: null,
          name: null,
          deptName: null,
          code: null,
          brand: null,
          model: null,
          unit: null,
        },
        defaultProps: {
          children: "children",
          label: "label"
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          userName: undefined,
          phonenumber: undefined,
          status: undefined,
          mainId: undefined,
          deptId: undefined,
          code: undefined,
          name: undefined,
          model: undefined,
          brand: undefined,
        },
        queryParams2: {
          pageNum: 1,
          pageSize: 20,
          userName: undefined,
          phonenumber: undefined,
          status: undefined,
          mainId: undefined,
          deptId: undefined,
          code: undefined,
          name: undefined,
          model: undefined,
          brand: undefined
        },
        rules: {
          code: [{
            required: true,
            message: "存货编码不能为空",
            trigger: "blur"
          }],
          name: [{
            required: true,
            message: "产品名称不能为空",
            trigger: "blur"
          }],
          deptId: [{
            required: true,
            message: "请选择产品分类",
            trigger: "blur"
          }],
          model: [{
            required: true,
            message: "规格型号不能为空",
            trigger: "blur"
          }],
          unit: [{
            required: true,
            message: "计量单位不能为空",
            trigger: "blur"
          }],
          type: [{
            required: true,
            message: "请选择产品类别",
            trigger: "blur"
          }],
          materialMain: [{
            required: true,
            message: "请选择材料材质",
            trigger: "blur"
          }],
        },
        materialMainList: [],
      };
    },
    watch: {
      // 根据名称筛选部门树
      deptName(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
      this.queryParams.deptId = '9562';
      this.getList();
      this.getTreeselect();
      this.getMaterialMain();
    },
    methods: {
      useMingxi(row) {
        this.$refs.useMingxiChukuFormList.show(row);
      },
      handleShow(row) {
        this.$refs.GoodsSaleListFormList.showSaleRecordForOrder(row);
      },
      churukuShow(row) {
        this.$refs.churukuFormList.showChuruku(row);
      },
      addGongyi(row) {
        this.$refs.addGongyiFormList.showGongyi(row);
      },
      /** 查询用户列表 */
      getList() {
        this.loading = true;
        listGoodsOrderIn(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        this.queryParams2.code = "101";
        listByLazyTree(this.queryParams2).then(response => {
          this.deptOptions = response.data;
        });
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.queryParams.deptId = data.id;
        this.deptId = data.id;
        this.selectArea({
          "id": this.deptId
        });
        this.handleQuery();
      },

      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          name: null,
          code: null,
          brand: null,
          model: null,
          unit: null,
          deptId: null,
          deptName: null,
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },


      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.form.deptId = this.deptId;
        this.form.code = this.code;
        this.title = "添加产品";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.form = row;
        this.open = true;
        this.title = "修改产品";
      },

      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != undefined) {
              goodsOrderInUpdate(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              goodsOrderInAdd(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const id = row.id || this.ids;
        this.$modal.confirm('是否确认存货编码为"' + row.code + '"的数据项？').then(function() {
          return delGoodsOrderIn(id);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },

      showUploadDialog() {
        this.$refs.uploadDialog.title = "信息导入";
        this.$refs.uploadDialog.tmplName = "货品明细.xlsx";
        this.$refs.uploadDialog.fileName = "货品明细.xlsx";
        this.$refs.uploadDialog.uploadUrl = "/goodsOrderIn/goodsOrderIn/import";
        this.$refs.uploadDialog.show();
      },

      handleFileSuccess(response, file, fileList) {
        this.$refs.uploadDialog.open = false;
        this.$refs.uploadDialog.isUploading = false;
        if (response.data.code == "200") {
          this.$alert("导入数据：" + response.data.num + "条！更新数据：" + response.data.numupdate + "条！"  +"不在系统的："+response.data.codes+"@@@"+ response.data
            .errorText, "导入结果", {
              dangerouslyUseHTMLString: true
            });
        } else {
          this.$alert("导入数据：" + response.data.num + "条！更新数据：" + response.data.numupdate + "条！"  +"不在系统的："+response.data.codes+"@@@"+ response.data
            .errorText, "导入结果", {
              dangerouslyUseHTMLString: true
            });
        }
        this.getList();
      },

      selectArea(e) {
        getAction("/goodsOrderIn/goodsOrderIn/getGoodsCodeByArea", {
          deptId: e.id
        }).then(response => {
          this.form.code = response.data.code;
          this.code = response.data.code;
        });
      },

      handleInventoryRu(row) {
        this.$refs.rukuForm.handleAddByGoods(row);
      },

      handleInventoryChu(row) {
        this.$refs.chukuForm.handleAddByGoods(row);
      },

      getMaterialMain() {
        let params = {
          orderByColumn: "type",
          isAsc: "asc",
          "pageSizeZero": true
        };
        getAction("/factoryTestMaterial/factoryTestMaterial/list", params).then(response => {
          this.materialMainList = response.rows;
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        let that = this;
        that.loading = false;
        that.$confirm('是否确认导出仓库产品信息表?', "确认", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          downloadFile('/goodsOrderIn/goodsOrderIn/exportGoodsInfo', that.queryParams);
        });
      },

    }
  };
</script>

<style lang="scss">
</style>
